<script lang="ts">
	import { type TableState } from '../store/table-state.svelte';

	interface Props {
		tableState: TableState;
		actRowHeight: number;
		multiple: boolean;
		border?: boolean;
		footerScrollContainerRef: HTMLElement | undefined;
	}

	let {
		tableState,
		actRowHeight,
		multiple,
		border = false,
		footerScrollContainerRef = $bindable()
	}: Props = $props();
</script>

<div
	class="footer-container"
	class:table--border={border}
	bind:this={footerScrollContainerRef}
	style:height={`${actRowHeight}px`}
>
	<div class="table-tfoot">
		<!-- 多选框占位 -->
		{#if multiple}
			<div class="check-box-container" style:width="30px"></div>
		{/if}

		{#each tableState.summaryCells as cell (cell.key)}
			{#if !cell.skip}
				<!-- 跳过被合并的单元格 -->
				<div
					class="table-td"
					style:--text-align={cell.align}
					style:width={`${cell.width}px`}
					class:is-merged={cell.colSpan > 1}
				>
					{cell.value}
				</div>
			{/if}
		{/each}
	</div>
</div>
<style lang="scss">
	@use '../styles/tableFooter.scss';
</style>
